<script lang="ts" setup>
// !axios 与 ts 如何配合使用
import axios from 'axios'
import { ref } from 'vue';
import { TResponse, TChannels, TChannel } from '../types/data'

defineProps<{
  channelId: number
}>()

const channels = ref<TChannel[]>([])

const emit = defineEmits<{
  (evName: 'updateChanneId', channelId: number): void
}>()

const getChannelList = async () => {
  const r = await axios.get<TResponse<TChannels>>('http://geek.itheima.net/v1_0/channels')
  // r.data.
  const resChannels = r.data.data.channels
  channels.value = resChannels

  emit('updateChanneId', resChannels[0].id)
}

getChannelList()
</script>

<template>
  <ul class="catagtory">
    <li @click="$emit('updateChanneId', item.id)" v-for="item in channels" :key="item.id" :class="{
      select: channelId === item.id
    }">{{item.name}}</li>
  </ul>
</template>

<style scoed lang="less"></style>
